<template>
	<view class="">
		<view class="">
			<view class="container-date">
				<u--form :model='form'>
					<u-form-item @click='show = true' label="采购时间: " labelWidth=80>
						<u--input v-model="time" disabledColor="#fff" placeholder="选择时间" disabled ></u--input>
						
					</u-form-item>
				</u--form>
				<image class='up' src="../../static/up.png" mode=""></image>
			</view>
			<u-calendar :show="show" color="#4F81E7" :mode="mode" @confirm="confirm" @close="close"></u-calendar>
		</view>
		<view class="container-mid">
			<view class="">
				<view class="title">
					<text>经费审批情况</text>
				</view>

			</view>
			<view>
				<view class="echarts">
					<l-echart ref="chart"></l-echart>
				</view>

			</view>
		</view>

		<view class="container-btm">
			<view class="">
				<view class="title">
					<text>审批通过内容统计</text>
				</view>

			</view>
			<view class="echarts">
				<l-echart ref="charttwo"></l-echart>
			</view>
		</view>

	</view>

</template>

<script>
	import * as echarts from 'echarts';

	export default {

		data() {
			return {
				form: {},
				time: '',
				end: '2022-12-26',
				show: false,
				mode: 'range'
			}
		},
		mounted() {
			this.$refs.charttwo.init(echarts, chart => {
				let option = {
					legend: {
						right: '0',
						top: 'middle',
						orient: 'vertical'
					},
					series: [{
						name: '',
						type: 'pie',
						radius: [15, 100],
						center: ['40%', '50%'],
						roseType: 'area',
						itemStyle: {
							borderRadius: 5
						},

						label: {
							show: false
						},
						data: [{
								value: 54,
								name: '车辆维修',
								itemStyle: {
									normal: { //颜色渐变
										color: new echarts.graphic.LinearGradient(
											1, 0, 0, 0, //(左-右 渐变)
											[{
													offset: 0,
													color: '#4bbfed'
												},
												// {offset: 0.5, color: '#8EED6E'},
												{
													offset: 1,
													color: '#3d96fe'
												},
											]
										)
									}
								}
							},
							{
								value: 48,
								name: '培训费',
								itemStyle: {
									normal: { //颜色渐变
										color: new echarts.graphic.LinearGradient(
											1, 0, 0, 0, //(左-右 渐变)
											[{
													offset: 0,
													color: '#895ff0'
												},
												// {offset: 0.5, color: '#8EED6E'},
												{
													offset: 1,
													color: '#6f51e2'
												},
											]
										)
									}
								}
							},

							{
								value: 45,
								name: '出差审批',
								itemStyle: {
									normal: { //颜色渐变
										color: new echarts.graphic.LinearGradient(
											0, 0, 0, 1, //(上-下 渐变)

											[{
													offset: 0,
													color: '#4be1a0'
												},
												// {offset: 0.5, color: '#8EED6E'},
												{
													offset: 1,
													color: '#17b6a9'
												},
											]
										)
									}
								}
							},
							{
								value: 40,
								name: '医疗外诊',
								itemStyle: {
									normal: { //颜色渐变
										color: new echarts.graphic.LinearGradient(
											1, 0, 0, 0, //(左-右 渐变)
											[{
													offset: 0,
													color: '#ffa85c'
												},
												// {offset: 0.5, color: '#8EED6E'},
												{
													offset: 1,
													color: '#ff9e49'
												},
											]
										)
									}
								}
							},
							{
								value: 36,
								name: '会议费',
								itemStyle: {
									normal: { //颜色渐变
										color: new echarts.graphic.LinearGradient(
											1, 0, 0, 0, //(左-右 渐变)
											[{
													offset: 0,
													color: '#e35145'
												},
												// {offset: 0.5, color: '#8EED6E'},
												{
													offset: 1,
													color: '#e36645'
												},
											]
										)
									}
								}
							}
						]
					}]
				}
				chart.setOption(option);

			});

			this.$refs.chart.init(echarts, chart => {
				let option = {
					legend: {
						right: '0',
						top: 'middle',
						orient: 'vertical'
					},
					series: [{
						name: '',
						type: 'pie',
						radius: [15, 100],
						center: ['49%', '50%'],
						roseType: 'area',
						percentPrecision: 0,
						itemStyle: {
							borderRadius: 5
						},
						labelLine: {
							length: 10,
							length2: 70,
							maxSurfaceAngle: 80,
						},
						label: {
							alignTo: 'labelLine',
							formatter: '{b} {d}% \n {c}',
							minMargin: 0,
							edgeDistance: 10,
							lineHeight: 20,
							padding: [0, -80],

							rich: {
								b: {
									fontSize: 10,
									lineHeight: 0,
								},
								d: {
									fontSize: 10,
									lineHeight: 20,
									color: 'red',
								},
								c: {
									ontSize: 10,
									lineHeight: 20
								}
							}
						},

						data: [{
								value: 40,
								name: '待审批',
								itemStyle: {
									normal: { //颜色渐变
										color: new echarts.graphic.LinearGradient(
											1, 0, 0, 0, //(左-右 渐变)
											[{
													offset: 0,
													color: '#4bbfed'
												},
												{
													offset: 1,
													color: '#3d96fe'
												},
											]
										)
									}
								}
							},
							{
								value: 38,
								name: '审批驳回',
								itemStyle: {
									normal: { //颜色渐变
										color: new echarts.graphic.LinearGradient(
											0, 0, 0, 1, //(上-下 渐变)

											[{
													offset: 0,
													color: '#4be1a0'
												},
												{
													offset: 1,
													color: '#17b6a9'
												},
											]
										)
									}
								}
							},
							{
								value: 32,
								name: '审批通过',
								itemStyle: {
									normal: { //颜色渐变
										color: new echarts.graphic.LinearGradient(
											1, 0, 0, 0, //(左-右 渐变)
											[{
													offset: 0,
													color: '#ffa85c'
												},
												{
													offset: 1,
													color: '#ff9e49'
												},
											]
										)
									}
								}
							}
						]
					}]
				}
				chart.setOption(option);
			});


		},
		methods: {
			confirm(e) {
				this.time = e[0] +  '~' + e[e.length - 1];
				this.close();
			},
			close() {
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #eee;
	}

	.container-date {
		border: 1px solid #E4E4E4;
		padding: 15rpx;
		background-color: #fff;

		.up{
			width: 20rpx;
			height: 12rpx;
			position:absolute;
			top:60rpx;
			right:50rpx
			}

	}

	.container-btm,
	.container-mid {

		// background-color: #fff;
		.title {
			padding: 30rpx;
			font-weight: bold;
		}
	}

	.echarts {
		border: 1px solid #E4E4E4;
		background-color: #fff;
		height: 300px;
	}
</style>
